<template>
  <div class="layout">
    <h2 class="animate__animated animate__fadeInDown">标题</h2>

    <div class="box">
      <div :class="['animate__animated', isDelete ? 'animate__hinge' : 'animate__fadeInLeft']">animate__hinge</div>
      <img :class="['animate__animated', isDelete ? 'animate__hinge' : 'animate__fadeInLeft']" :src="img" alt="">
      <el-button class="animate__animated animate__zoomInDown" @click="handleDelete">{{isDelete ? '还原' :'删除'}}</el-button>
    </div>
  </div>

</template>
<!-- 
1.安装animate.css
2.在main.js,入口文件引入animate.css动画库
import 'animate.css'
3.给需要加动画的元素添加对应的类名
<div class="animate__animated animate__fadeInDown"></div>
注意：对应的所有类名都以animate__开头，并且还要配合animate__animated一起使用！
 -->
<script setup>
import { ref } from 'vue'
import img from '@/assets/images/echarts/jrfwcs.png'
const isDelete = ref(false)
const handleDelete = () => {
  console.log('delete')
  isDelete.value = !isDelete.value
}
</script>

<style lang="scss" scoped>
.layout {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  .box {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>